<template>
  <div class="container">
    <div class="c_header">
      <div class="c_header_div">
        <div class="c_header_div_left"><a href="index.html"><img src="../../img/logo.png" height="78"
                                                                 width="178"></a></div>
        <div class="c_header_div_right"><span>| 登录</span></div>
      </div>
    </div>
    <div>
      <div class="user-tel">
        <div class="left"> <span>手机号</span></div>
        <div class="right" style="color: red" id="error_id"><span type="text" v-model="err_telephone">{{err_telephone}}</span></div>
      </div>

      <div class="down">
        <input id="id" type="text"  ref="tel" placeholder='请输入手机号' @keyup.enter="log_on" v-model="telephone" @change="check_telephone">
      </div>


      <div class="user-tel">
        <div class="left"> <span>密码</span></div>
        <div class="right" style="color: red" id="error_pwd" ><span type="text" v-model="err_password">{{err_password}}</span></div>
      </div>

       <div class="down"><input id="pwd" type="password" placeholder="请输入密码" @keyup.enter="log_on" v-model="password" @change="check_password"/>
       <div class="remember"><label><input type="checkbox" @keyup.enter="log_on" v-model="checked" value="checked" />记住密码 </label></div>
      </div>
    </div>


    <div class="finish">
      <input type="button" id="btn" value="登录"  @click="log_on">
      <span class="login_error"></span>

      <br>
      <div class="problem">
        <router-link to="/Register" class="pro">新用户注册</router-link><span>|</span><router-link to="/retrieve" class="pro">找回密码</router-link>
        <br><br>
        <a href="" class="pro">我已阅读《用户协议》</a>
      </div>
    </div>

  </div>

</template>

<script>
    export default {
      name: "Login",
      data() {
        return {
          data: '',
          telephone: '',
          err_telephone: '',
          password: '',
          err_password: '',
          telephone_a: '',
          err_telephone_a: '',
          checking_code: '',
          err_checking_code: '',
          number: 1,
          checked: false,
          gain_text: '获取验证码',
          code_dist: {},
          colo: {
            color: '#409eff',
            borderBottom: 'solid 1.5px #36A4FF'
          }
        }
      },
      created: function () {
        var is_remember = localStorage.getItem('isRemember')
        if (is_remember) {
          this.checked = true;
          this.telephone = localStorage.getItem('telephone');
          this.password = localStorage.getItem('password');
        }

      },
      mounted(){
        this.$refs.tel.focus()
      },
      methods: {
        close: function () {
          Bus.$emit('close', false)
        },
        resign: function () {
          Bus.$emit('login', false);
          Bus.$emit('resign', true)
        },
        retrieve: function () {
          Bus.$emit('login', false);
          Bus.$emit('retrieve', true)
        },
        open1: function () {
          this.$message({
            showClose: true,
            message: '恭喜您登录成功',
            type: 'success'
          });
        },
        check_telephone: function () {
          var reg_tel = /^1[345678]\d{9}$/;
          if (this.telephone) {
            if (reg_tel.test(this.telephone)) {
              this.err_telephone = "";
              return true
            } else {
              this.err_telephone = "* 请输入正确的手机号";
              return false;
            }
          } else {
            this.err_telephone = "* 请输入手机号";
            return false;
          }
        },
        check_password: function () {
          var reg_pwd = /^\w{6,18}$/;
          if (this.password) {
            if (reg_pwd.test(this.password)) {
              this.err_password = "";
              return true;
            } else {
              this.err_password = "* 密码格式不合法";
              return false;
            }
          } else {
            this.err_password = "* 请输入密码";
            return false;
          }
        },
        check_telephone_a: function () {
          var reg_tel = /^1[345678]\d{9}$/;
          if (this.telephone_a) {
            if (reg_tel.test(this.telephone_a)) {
              this.err_telephone_a = "";
              return true
            } else {
              this.err_telephone_a = "* 请输入正确的手机号";
              return false;
            }
          } else {
            this.err_telephone_a = "* 请输入手机号";
            return false;
          }
        },
        check_checking: function () {
          var reg_checking = /^\d{4}$/;

          if (this.checking_code) {
            if (reg_checking.test(this.checking_code)) {
              this.err_checking_code = "";
              return true;
            } else {
              this.err_checking_code = "* 请输入正确的验证码";
              return false;
            }
          } else {
            this.err_checking_code = "* 请输入验证码";
            return false;
          }
        },
        //账号密码登录
        log_on: function () {
          let this_new = this;
          if (this.check_telephone() && this.check_password()) {
            this.$axios.post('http://127.0.0.1:8080/user/login/', {
              "telephone": this.telephone,
              "password": this.password,
            })
              .then( (response)=> {
                console.log(response.data);
                if (response.data.code === '1001') {
                  localStorage.setItem('token', response.data.token);
                  localStorage.setItem('id', response.data.id);

                  this.$router.push("/");
                  this_new.open1()

                  if (this_new.checked) {
                    localStorage.setItem('isRemember', true);
                    localStorage.setItem('telephone', this_new.telephone);
                    localStorage.setItem('password', this_new.password);
                  } else {
                    localStorage.removeItem('isRemember');
                    localStorage.setItem('telephone', this_new.telephone);
                    localStorage.removeItem('password');
                  }
                }
                if (response.data.code === '4005') {
                  this_new.err_telephone = '* ' + response.data.description
                }
                if (response.data.code === '4004') {
                  this_new.err_password = '* ' + response.data.description
                }
              })
              .catch(function (error) {
                console.log(error);
              });
          }
        },
      }
    }


</script>

<style scoped>
  .container{
    position: relative;
    /*border: solid 2px black;*/
    width: 900px;
    height: 630px;
    margin: auto;
    /*margin-top:40px;*/
    box-shadow: 0px 0px 10px 5px #aaa;
    background: white;
    margin-top: 40px;


  }

  .c_header{
    width: 900px;
    height: 100px;
    display: flex;
    justify-content: center;
    background-color: #2b2b32;
    margin-bottom: 30px;
  }
  .c_header_div{
    display: flex;
    justify-content: center;
    padding-top: 10px;
  }
  .c_header .c_header_div span{
    padding-top: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
    font-size: 30px;
    color: white;
  }
  .c_header_div img{
    height:38px ;width:60px
  }
  .c_header_div_left{
    padding-top: 20px;
  }
  .c_header_div_right{
    padding-top: 20px;
  }

  .user-tel{
    margin-left: 330px;
    width: 400px;
    height: 60px}

  .user-tel .left{
    margin-top:30px;
    float: left;
    height: 30px;
  }
  .user-tel span{
    font-size: 20px;
  }
  /*#phone{*/
  /*    */
  /*}*/
  .user-tel .right{
    margin-top: 26px;
    margin-right:150px ;
    float:right;
    height: 30px;
  }
  .user-tel .right input{
    width: 100px;
    height: 30px;
    border: none;
  }
  .down{
    margin-left: 330px;
    width: 400px;
    height: 40px;
  }
  .remember{
    position: relative;
    top: 20px;
    right: 110px;
    width: 400px;
    height: 40px;
  }

  .remember label input{

    width:20px;
    height: 20px;
    margin-left: 110px;
    position: relative;
    top: 4px;
  }

  .down input{
    width: 250px;
    height: 30px;
  }

  .finish{
    margin-top: 70px;
    margin-left: 360px;
    height: 100px;
    width: 240px;
  }
  .finish input{
    height: 50px;
    width: 140px;
    background-color: red;
    border: none;
    font-size: 20px;
    color: white;
    margin-left: 20px;
  }

  .problem{
    text-align: center;
    margin-top: 15px;
    width: 200px;
    /*margin-left: 340px;*/
  }
  a{
    margin-top: 20px;
    text-decoration: none;
    color: black;


  }
  a:hover{
    color: #ff171d;
  }
  .login_error{
    width: 550px;
    height: 80px;
    margin: auto;
    text-align: center;
    line-height: 80px;
    color: #64b7ff;
    font-size: 1em;

  }
</style>
